<template>
  <!-- 素材内容详情 -->
  <div class="p-2">
    <!-- 图片展示区 -->
    <el-card class="mb-3" :shadow="`${flag == '0' ? 'hover' : 'never'}`">
      <!-- 素材图片 -->
      <template v-slot:header>
        <div class="muonseu">
          <div class="clearfix">
            素材图片
          </div>
          <div v-if="flag == '0'">
            <el-button type="primary" @click="dialogVisible.visible = true">添 加</el-button>
          </div>
        </div>
      </template>
      <!-- 素材图片内容标签页 -->
      <el-tabs v-model="activeName" type="border-card" class="demo-tabs" v-if="editableTabs">
        <el-tab-pane :label="String(name)" :name="index" v-for="(value, name, index) in editableTabs" :key="index">
          <!-- 排序拖拽的图片组件 -->
          <div v-if="huinseu">
            <!-- 确认取消按钮 -->
            <div style="margin-bottom: 8px;">
              <el-button type="primary" @click="imgConfirm(huonseu)">确 认</el-button>
              <el-button @click="imgCancellation()">取 消</el-button>
            </div>
            <!-- 图片拖拽排序 -->
            <draggable :list="huonseu" animation="300" item-key="id" class="cuinsey">
              <template #item="{ element }">
                <div class="item">
                  <el-image style="width: 146px; height: 146px;margin-right: 8px;margin-bottom: 8px;"
                    :src="element.url" fit="contain" />
                </div>
              </template>
            </draggable>
          </div>

          <!-- 素材管理详情展示的 -->
          <div v-else-if="flag == '0'">
            <!-- 排序 -->
            <el-button type="primary" @click="huoinse(value)" style="margin-bottom: 8px;">排 序</el-button>
            <!-- 上传图片组件 -->
            <div class="cuinsey">
              <div v-for="(item, index) in value" :key="item" style="margin-bottom: 10px;">
                <el-image style="width: 146px; height: 146px; margin-right: 10px;"
                  :src="item.url"
                  :preview-src-list="[value[index].url]" fit="contain" />
                <!-- 删除按钮 -->
                <div @click="handleRemove(item)">
                  <el-button type="danger" :icon="Delete" class="tuioncae" style="width: 150px;" />
                </div>
              </div>
            </div>


            <!-- <el-upload 
                :file-list="value" 
                action="#"
                list-type="picture-card"
                :http-request="huonseuon"
                :on-success="tuionsecn"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                @click="cuonseio(String(name))"
              >
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              查看图片大图弹窗
              <el-dialog v-model="checked" width="500px">
                <img w-full :src="tionscuio" alt="" />
              </el-dialog> -->
          </div>

          <!-- 抖音商品详情展示的 -->
          <div v-else>
            <el-image v-for="(item, index) in value" :key="item" style="width: 146px; height: 146px; margin-right: 10px;"
              :src="item.url" :preview-src-list="[value[index].url]"
              fit="contain" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 视频展示区 -->
    <el-card :shadow="`${flag == '0' ? 'hover' : 'never'}`">
      <!-- 素材视频 -->
      <template v-slot:header>
        <div class="muonseu">
          <div class="clearfix">
            素材视频
          </div>
          <div v-if="flag == '0'">
            <el-button type="primary" @click="cuionseaui.visible = true">添 加</el-button>
          </div>
        </div>
      </template>
      <!-- 素材视频内容 -->
      <div>
        <!-- 标签页 -->
        <el-tabs v-model="dialogImageUrl" type="border-card" class="demo-tabs" v-if="tionsfgad">
          <el-tab-pane :label="String(name)" :name="index" v-for="(value, name, index) in tionsfgad" :key="index">
            <!-- 视频拖拽排序 -->
            <div v-if="mionseu">
              <!-- 确认取消按钮 -->
              <div style="margin-bottom: 8px;">
                <el-button type="primary" @click="muinscin(buionset)">确 认</el-button>
                <el-button @click="huondetio()">取 消</el-button>
              </div>
              <draggable :list="buionset" animation="300" item-key="id" class="cuinsey">
                <template #item="{ element }">
                  <div class="item" style="margin-right: 10px;margin-bottom: 10px;">
                    <video style="width: 240px; max-height: 350px;" controls :src="element.url"
                      :poster="element.url.replace('oss.fengjuhe.com','juguanghe.oss-cn-hangzhou.aliyuncs.com') + '?x-oss-process=video/snapshot,t_10000,m_fast'"></video>
                  </div>
                </template>
              </draggable>
            </div>
            <!-- 素材视频详情 -->
            <div v-else-if="flag == '0'">
              <!-- 排序 -->
              <el-button type="primary" @click="muionseui(value)" style="margin-bottom: 8px;">排 序</el-button>
              <!-- 循环展示的视频 -->
              <div class="cuinsey">
                <div v-for="(item, index) in value" :key="index" class="cuinseon">
                  <video style="width: 240px; max-height: 350px;" controls :src="item.url"
                    :poster="item.url.replace('oss.fengjuhe.com','juguanghe.oss-cn-hangzhou.aliyuncs.com') + '?x-oss-process=video/snapshot,t_10000,m_fast'">
                  </video>
                  <!-- 删除按钮 -->
                  <div @click="muionsecui(item.id)">
                    <el-button type="danger" :icon="Delete" class="tuioncae" style="width: 150px;" />
                  </div>
                </div>
                <!-- 上传视频 -->
                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="tuinseci"
                  :on-success="huonseinau" @click="muionseo(String(name))">
                  <el-icon class="avatar-uploader-icon" style="width: 180px;height: 350px">
                    <Plus />
                  </el-icon>
                </el-upload>
              </div>
            </div>
            <!-- 抖音商品详情视频展示 -->
            <div v-else class="flex">
              <div v-for="(item, index) in value" :key="index" style="margin-right: 10px;">
                <video style="width: 240px; max-height: 350px;" controls :src="item.url"
                  :poster="item.url.replace('oss.fengjuhe.com','juguanghe.oss-cn-hangzhou.aliyuncs.com') + '?x-oss-process=video/snapshot,t_10000,m_fast'"></video>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>


    <!-- 添加图片内容弹窗 -->
    <el-dialog title="添加图片内容" v-model="dialogVisible.visible" width="480px" append-to-body v-if="dialogVisible.visible">
      <el-form ref="queryFormRef" :model="queryParams" :rules="rules" label-width="80px">
        <el-form-item label="类型" prop="type" style="width: 180px;">
          <el-select placeholder="请选择" v-model="queryParams.type">
            <el-option v-for="dict in options" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tag" style="width: 230px;">
          <el-input placeholder="请填写标签" :maxLength="20" v-model="queryParams.tag" clearable></el-input>
        </el-form-item>
        <el-form-item label="原图" prop="url">
          <!-- 上传组件 -->
          <el-upload action="#" class="avatar-uploader" :show-file-list="false" :http-request="upuonsetics"
            :on-success="coverRequest" :before-upload="beforeAvatarUpload" v-loading="loading"
            element-loading-text="正在抠图中..." :element-loading-spinner="svg"
            element-loading-svg-view-box="-10, -10, 50, 50">
            <img v-if="queryParams.url" :src="queryParams.url" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
          <!-- 进度条 -->
          <el-progress v-show="isShow" :text-inside="true" :stroke-width="15" :percentage="progressShu" />
          <!-- 一键抠图，手动抠图，下载图片三个按钮 -->
          <div class="flex" v-if="tuonset">
            <div class="huniet">
              <a class="muonset" @click="muonsec()">一键抠图</a>
            </div>
            <div style="margin-right: 15px;">
              <el-upload action="#" :http-request="uonseonct" :show-file-list="false">
                <el-button v-loading="loadingUrl" type="primary" style="margin-top: 10px">手动抠图</el-button>
              </el-upload>
            </div>
            <div class="huniet" v-if="tionscuio">
              <a :href="tionscuio" download class="muonset">下载图片</a>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="白底图" prop="bgUrl">
          <el-upload action="#" class="avatar-uploader" :show-file-list="false" :http-request="huonseuin">
            <img v-if="queryParams.bgUrl" :src="queryParams.bgUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
          <!-- 进度条 -->
          <!-- <el-progress v-show="isShow" :text-inside="true" :stroke-width="15" :percentage="progressShu" /> -->
          <el-progress v-show="ionsetui" :text-inside="true" :stroke-width="15" :percentage="bonseuict" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="tuionsec">确 定</el-button>
          <el-button @click="resetQuery">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加视频内容弹窗 -->
    <el-dialog title="添加视频内容" v-model="cuionseaui.visible" width="480px" append-to-body v-if="cuionseaui.visible">
      <el-form ref="munseoncst" :model="form" label-width="80px">
        <el-form-item label="类型" prop="type" style="width: 180px;">
          <el-select placeholder="请选择" v-model="form.type">
            <el-option v-for="dict in muonsci" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tag" style="width: 230px;">
          <el-input placeholder="请填写标签" :maxLength="20" v-model="form.tag" clearable></el-input>
        </el-form-item>
        <el-form-item label="视频" prop="url" class="cuinse">
          <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="muoinseuin"
            :on-success="huinsemion">
            <video style="width: 200px; max-height: 500px" v-if="form.url" controls :src="form.url"
              :poster="form.url.replace('oss.fengjuhe.com','juguanghe.oss-cn-hangzhou.aliyuncs.com') + '?x-oss-process=video/snapshot,t_10000,m_fast'"></video>
            <el-icon v-else class="avatar-uploader-icon" style="width: 200px;">
              <Plus />
            </el-icon>
          </el-upload>
          <!-- 进度条 -->
          <el-progress v-show="isShow" :text-inside="true" :stroke-width="15" :percentage="progressShu"
            style="width: 200px;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="muiosneui">确 定</el-button>
          <el-button @click="tuinseon">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts" name="DetailsMaterial">
import upload from "@/utils/upload";
import {
  Delete,
} from '@element-plus/icons-vue'
import { huonsetico, addContent, delContent, demuinsesort, putccanel, muionsef } from '@/api/operates/material/index';
import { HeuinsWcie, muionseyuc } from '@/api/operates/material/types';
// 获取toke的方法
import { globalHeaders } from "@/utils/request";
// Element上传组件的类型声明
import type { UploadProps, UploadUserFile, UploadProgressEvent, UploadFiles } from 'element-plus'

/************************ 引用的oss自定义图片上传和进度条 ******************************/
import axios from 'axios'
import OSS from 'ali-oss'
import { v4 as uuidv4 } from 'uuid'
const bashPath = '/sts';//oss上传地址
const bucket = 'juguanghe'
const region = 'oss-cn-hangzhou'
const progressShu = ref(0) //控制进度条
const isShow = ref(false) //控制上传按钮和进度条的显示

const bonseuict = ref(0) //控制进度条
const ionsetui = ref(false) //控制上传按钮和进度条的显示
const loading = ref(false) //控制正在抠图的动画效果
const tuonset = ref(false) //控制下载图片的按钮显示
const tionscuio = ref('')//抠图完成保存的参数
const loadingUrl = ref(false)//控制手动抠图的动画效果
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const huonseom = reactive<UploadOption>({
  headers: globalHeaders(),
  url: import.meta.env.VITE_APP_BASE_API + '/file/upload'
})
// 接收父组件的参数
const { id } = defineProps({
  id: {},
  flag: {
    default: "0"
  }
});
const activeName = ref(0)
const editableTabs = ref()
//详情图 
const introList = ref<any>([])
const dialogImageUrl = ref(0)
const tionsfgad = ref()
const queryFormRef = ref<ElFormInstance>();

const dialogVisible = reactive<DialogOption>({
  visible: false,
});

const munseoncst = ref<ElFormInstance>();
const ids = ref<Array<string | number>>([])
const cuionseaui = reactive<DialogOption>({
  visible: false,
});
const huonseu = ref<muionseyuc[]>([])
const checked = ref(false)
const huinseu = ref(false)
const mionseu = ref(false)
const buionset = ref<muionseyuc[]>([])
const initFormData: HeuinsWcie = {
  materialId: '',
  type: 'VIDEO',
  tag: '',
  url: '',
  fileSize: 0,
}
const data = reactive<PageData<HeuinsWcie, HeuinsWcie>>({
  form: { ...initFormData },
  queryParams: {
    materialId: '',
    type: 'IMAGE',
    tag: '',
    url: '',
    bgUrl: '',
    fileSize: 0,
  },
  rules: {}
})

const { queryParams, form, rules } = toRefs(data)

/**
 * 添加素材图片弹窗的类型
 */
const options = [
  {
    value: 'IMAGE',
    label: '图片',
  }
]

/**
 * 添加素材视频弹窗的类型
 */
const muonsci = [
  {
    value: 'VIDEO',
    label: '视频',
  }
]

/**
 * 图片上传的限制
 */
const beforeAvatarUpload = (file: any) => {
  // console.log(file);
  const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
  const isJPG = type.includes(file.type);
  //检验文件格式
  if (!isJPG) {
    proxy?.$modal.msgError(`图片格式错误!`);
    return false;
  } else if (file.size / 1024 / 1024 > 15) {
    proxy?.$modal.msgError(`上传文件大小不能超过 15MB!`)
    return false;
  }
  return true
}

/**
 * 视频上传的限制
 */
const befuionscui = (file: any) => {
  // console.log(file.type);
  const type = ["video/mp4"];
  const isJPG = type.includes(file.type);
  //检验文件格式
  if (!isJPG) {
    proxy?.$modal.msgError(`上传视频只能是 mp4 格式!!`);
    return false;
  }
}
/**
 * 自定义获取原图上传的方法
 */
const upuonsetics = async (op: any) => {
  // console.log(op.file);
  /******************* 清空图片，进度条隐藏，进度条的进度值清空 ************************/
  queryParams.value.url = '';
  isShow.value = false;
  progressShu.value = 0;
  /********************************** 自定义的oss方法 *************************************/
  const file = op.file;
  let fileName = file.name;
  let sts = await axios.get(bashPath);
  const client = new OSS({
    region,
    accessKeyId: sts.data.AccessKeyId,
    accessKeySecret: sts.data.AccessKeySecret,
    stsToken: sts.data.SecurityToken,
    bucket,
    // 刷新临时访问凭证的时间间隔，单位为毫秒。
    refreshSTSTokenInterval: 3600 * 1000
  })
  let uuid = uuidv4() + fileName.substring(fileName.lastIndexOf('.'))

  return client.multipartUpload('tantao/' + uuid, file, {
    //p进度条的值
    progress: (p, checkpoint) => {
      isShow.value = true;//显示进度条
      progressShu.value = Number((p * 100).toFixed(0));//转换进度条数字
    },
    mime: file.type,
  }).then((res: any) => {
    let url = res.res.requestUrls[0];
    if (url.indexOf('?') > -1) {
      queryParams.value.url = url.substring(0, url.indexOf('?')).replace('juguanghe.oss-cn-hangzhou.aliyuncs.com', 'oss.fengjuhe.com');//赋值
      console.log('2222' + queryParams.value.url);
      // 判断进度条等于100的时候
      if (progressShu.value == 100) {
        // 开启定时器
        let syinmr = setInterval(() => {
          isShow.value = false;//关闭图片上传的进度条
          tuonset.value = true;//控制下载图片的按钮显示
          //tuionse(queryParams.value.url);//调用抠图的方法
          //loading.value = true;//开启正在抠图的动画
          clearInterval(syinmr);//关闭定时器
        }, 1100)
      }
    } else {
      queryParams.value.url = url.replace('juguanghe.oss-cn-hangzhou.aliyuncs.com', 'oss.fengjuhe.com');//赋值
      console.log('3333' + queryParams.value.url);
      tuonset.value = true;//控制下载图片的按钮显示
      //tuionse(queryParams.value.url);//调用抠图的方法
      //loading.value = true;//开启正在抠图的动画
      isShow.value = false;//关闭图片上传的进度条
    }
  }).catch((err) => {
    console.log('err', err);
  });
}
/**
 * 自定义获取手动抠图的url方法
 */
const uonseonct = async (op: any) => {
  // console.log(op.file);
  loadingUrl.value = true;//开启正在抠图的动画
  /********************************** 自定义的oss方法 *************************************/
  const file = op.file;
  let fileName = file.name;
  let sts = await axios.get(bashPath);
  const client = new OSS({
    region,
    accessKeyId: sts.data.AccessKeyId,
    accessKeySecret: sts.data.AccessKeySecret,
    stsToken: sts.data.SecurityToken,
    bucket,
    // 刷新临时访问凭证的时间间隔，单位为毫秒。
    refreshSTSTokenInterval: 3600 * 1000
  })
  let uuid = uuidv4() + fileName.substring(fileName.lastIndexOf('.'))

  return client.multipartUpload('tantao/' + uuid, file, {
    //p进度条的值
    progress: (p, checkpoint) => { },
    mime: file.type,
  }).then((res: any) => {
    let url = res.res.requestUrls[0];
    if (url.indexOf('?') > -1) {
      let huonecu = url.substring(0, url.indexOf('?')).replace('juguanghe.oss-cn-hangzhou.aliyuncs.com', 'oss.fengjuhe.com');//赋值
      console.log('2222' + huonecu);
      tuionse(huonecu);//调用抠图的方法
    } else {
      let huonecu = url.replace('juguanghe.oss-cn-hangzhou.aliyuncs.com', 'oss.fengjuhe.com');//赋值
      console.log('2222' + huonecu);
      tuionse(huonecu);//调用抠图的方法
    }
  }).catch((err) => {
    console.log('err', err);
  });
}
// 一键抠图的方法
const muonsec = () => {
  // console.log(url);
  tuionse(queryParams.value.url);//调用抠图的方法
  loading.value = true;//开启正在抠图的动画
}
// 使用js图片下载的方法
const monuryi = async (muinurl: string) => {
  const imgUrl = muinurl
  const response = await fetch(imgUrl)
  const blob = await response.blob()
  // 创建下载链接
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'image.png'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  // 释放 Blob URL
  window.URL.revokeObjectURL(url)
}
// 佐糖的抠图api的调用
const tuionse = async (url: string | undefined) => {
  let ruinse = {
    image_url: url
  }
  let res = await putccanel(ruinse) //创建抠图任务的接口
  // console.log(res);
  if (res.status == 200) {
    let tesr = await muionsef(res.data.task_id) //获取抠图结果的接口
    // 根据状态码来判断需不需要轮询抠图结果接口
    if (tesr.data.state != 1) {
      // 定时器轮询抠图结果接口
      const syinmr = setInterval(async () => {
        let response = await muionsef(res.data.task_id)
        if (response.data.state == 1) {
          clearInterval(syinmr)//关闭定时器
          console.log(response.data.image);
          monuryi(response.data.image);//调用下载图片的方法
          tuonset.value = true;//控制下载图片的按钮显示
          tionscuio.value = response.data.image;//赋值下载图片
          proxy?.$modal.msgSuccess(`抠图成功`)
          loading.value = false;//控制正在抠图的动画效果
          loadingUrl.value = false;//控制手动抠图的动画效果
        }
      }, 1000)
    } else {
      tuonset.value = true;
      tionscuio.value = tesr.data.image;
      proxy?.$modal.msgSuccess(`抠图成功`)
      loading.value = false;
      loadingUrl.value = false;//控制手动抠图的动画效果
    }

  }
}

/**
 * 自定义方法获取白底图图片上传url
 */
const huonseuin = async (op: any) => {
  // console.log(op.file);
  /******************* 清空图片，进度条隐藏，进度条的进度值清空 ************************/
  queryParams.value.bgUrl = '';
  ionsetui.value = false;
  bonseuict.value = 0;
  /********************************** 自定义的oss方法 *************************************/
  const file = op.file;
  let fileName = file.name;
  let sts = await axios.get(bashPath);
  const client = new OSS({
    region,
    accessKeyId: sts.data.AccessKeyId,
    accessKeySecret: sts.data.AccessKeySecret,
    stsToken: sts.data.SecurityToken,
    bucket,
    // 刷新临时访问凭证的时间间隔，单位为毫秒。
    refreshSTSTokenInterval: 3600 * 1000
  })
  let uuid = uuidv4() + fileName.substring(fileName.lastIndexOf('.'))

  return client.multipartUpload('tantao/' + uuid, file, {
    //p进度条的值
    progress: (p, checkpoint) => {
      ionsetui.value = true;//显示进度条
      bonseuict.value = Number((p * 100).toFixed(0));
    },
    mime: file.type,
  }).then((res: any) => {
    let url = res.res.requestUrls[0];
    if (url.indexOf('?') > -1) {
      queryParams.value.bgUrl = url.substring(0, url.indexOf('?')).replace('juguanghe.oss-cn-hangzhou.aliyuncs.com', 'oss.fengjuhe.com');
      console.log('2222' + queryParams.value.bgUrl);
      // 判断进度条等于100的时候
      if (bonseuict.value == 100) {
        // 定时器
        let syinmr = setInterval(() => {
          ionsetui.value = false;//隐藏进度条
          clearInterval(syinmr)//关闭定时器
        }, 1100)
      }
    } else {
      queryParams.value.bgUrl = url.replace('juguanghe.oss-cn-hangzhou.aliyuncs.com', 'oss.fengjuhe.com');
      console.log('2222' + queryParams.value.bgUrl);
      ionsetui.value = false;
    }
  }).catch((err) => {
    console.log('err', err);
  });
}

/**
 * 弹窗的获取图片的大小
 */
const coverRequest = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  queryParams.value.fileSize = uploadFile.size;
}

/**
 * 弹窗的获取视频的大小
 */
const huinsemion = async (response: any, uploadFile: UploadFile) => {
  form.value.fileSize = uploadFile.size;
}
/**
 * 自定义方法获取视频上传url
 */
const muoinseuin = async (op: any) => {
  // console.log(op.file);
  /******************* 清空图片，进度条隐藏，进度条的进度值清空 ************************/
  form.value.url = '';
  isShow.value = false;
  progressShu.value = 0;
  /********************************** 自定义的oss方法 *************************************/
  const file = op.file;
  let fileName = file.name;
  let sts = await axios.get(bashPath);
  const client = new OSS({
    region,
    accessKeyId: sts.data.AccessKeyId,
    accessKeySecret: sts.data.AccessKeySecret,
    stsToken: sts.data.SecurityToken,
    bucket,
    // 刷新临时访问凭证的时间间隔，单位为毫秒。
    refreshSTSTokenInterval: 3600 * 1000
  })
  let uuid = uuidv4() + fileName.substring(fileName.lastIndexOf('.'))

  return client.multipartUpload('tantao/' + uuid, file, {
    //p进度条的值
    progress: (p, checkpoint) => {
      isShow.value = true;//显示进度条
      progressShu.value = Number((p * 100).toFixed(0));
    },
    mime: file.type,
  }).then((res: any) => {
    let url = res.res.requestUrls[0];
    if (url.indexOf('?') > -1) {
      form.value.url = url.substring(0, url.indexOf('?')).replace('juguanghe.oss-cn-hangzhou.aliyuncs.com', 'oss.fengjuhe.com');
      console.log('2222' + form.value.url);
      if (progressShu.value == 100) {
        let syinmr = setInterval(() => {
          isShow.value = false;
          clearInterval(syinmr)
        }, 1100)
      }
    } else {
      form.value.url = url.replace('juguanghe.oss-cn-hangzhou.aliyuncs.com', 'oss.fengjuhe.com');
      console.log('2222' + form.value.url);
      isShow.value = false;
    }
  }).catch((err) => {
    console.log('err', err);
  });
}
// 素材视频点击事件传tag标签
const muionseo = (name: string) => {
  form.value.tag = name;
}

/**
 * 获取外部视频上传url
 */
const huonseinau = async (response: any, uploadFile: UploadFile) => {
  form.value.materialId = id as string | number;
  form.value.fileSize = uploadFile.size;
  await addContent(form.value)
  gethuonse()
  proxy?.$modal.msgSuccess(`添加成功`)
}

/**
 * 自定义oss上传url
 */
const tuinseci = async (op: any) => {
  const res = await upload(op.file)
  // console.log(res);
  form.value.url = res;
}



// 调用素材内容
const getTitle = async () => {
  const { data } = await huonsetico(id as string | number)
  // console.log(data.IMAGE);
  editableTabs.value = data.IMAGE;
  tionsfgad.value = data.VIDEO;
  // console.log(editableTabs.value);
}

// 单独调用素材视频接口
const gethuonse = async () => {
  const { data } = await huonsetico(id as string | number)
  // console.log(data.IMAGE);
  tionsfgad.value = data.VIDEO;
  // console.log(editableTabs.value);
}
/**
 * 添加素材图片内容接口确认
 */
const tuionsec = async () => {
  queryParams.value.materialId = id as string | number;
  await addContent(queryParams.value)
  getTitle()
  proxy?.$modal.msgSuccess(`添加成功`)
  queryFormRef.value?.resetFields();
  dialogVisible.visible = false
}


/**
 * 添加素材图片内容接口取消
 */
const resetQuery = () => {
  tuonset.value = false;//控制下载图片的按钮显示
  loading.value = false;//控制正在抠图的动画效果
  queryFormRef.value?.resetFields();
  dialogVisible.visible = false;
}

// 删除素材视频
const muionsecui = async (row: any) => {
  try {
    // console.log(row);
    const id = row;
    await proxy?.$modal.confirm(`是否确认删除`);
    await delContent(id)
    activeName.value = 0
    gethuonse()
    proxy?.$modal.msgSuccess(`删除成功`)
  } catch (error) {
  }
}



/**
 * 添加素材视频内容接口确认
 */
const muiosneui = async () => {
  form.value.materialId = id as string | number;
  await addContent(form.value)
  getTitle()
  munseoncst.value?.resetFields();
  proxy?.$modal.msgSuccess(`添加成功`)
  cuionseaui.visible = false
}

/**
 * 添加素材视频内容接口取消
 */
const tuinseon = () => {
  munseoncst.value?.resetFields();
  cuionseaui.visible = false;
}

// 素材图片点击事件传tag标签
const cuonseio = (name: string) => {
  queryParams.value.tag = name;
}
// 素材图片上传成功的回调
const tuionsecn: UploadProps['onSuccess'] = async (response, uploadFile) => {
  queryParams.value.materialId = id as string | number;
  queryParams.value.fileSize = uploadFile.size;
  await addContent(queryParams.value)
  getTitle()
  proxy?.$modal.msgSuccess(`添加成功`)
}

// 素材图片上传成功的回调
const huonseuon = async (op: any) => {
  const res = await upload(op.file)
  // console.log(res);
  queryParams.value.url = res;
}

// 素材图片移除事件
const handleRemove = async (uploadFile: any) => {
  // console.log(uploadFile.id)
  try {
    const id = uploadFile.id;
    await proxy?.$modal.confirm(`是否确认删除`);
    await delContent(id)
    activeName.value = 0
    proxy?.$modal.msgSuccess(`删除成功`)
    getTitle()
  } catch (error) {
    getTitle()
  }
}
// 素材图片查看大图
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  tionscuio.value = uploadFile.url!
  checked.value = true
}

// 图片排序
const huoinse = (onuinc: any) => {
  huonseu.value = [...onuinc];
  huinseu.value = true;
}
// 图片排序拖拽确认
const imgConfirm = async (tonseu: any) => {
  ids.value = tonseu.map((item: HeuinsWcie) => item.id)
  await demuinsesort(ids.value)
  getTitle()
  proxy?.$modal.msgSuccess(`排序成功`)
  huinseu.value = false;
}
// 图片排序拖拽取消
const imgCancellation = () => {
  huonseu.value = [];
  huinseu.value = false;
}

// 视频排序
const muionseui = (onuinc: any) => {
  buionset.value = [...onuinc];
  mionseu.value = true;
}
// 视频排序拖拽确认
const muinscin = async (tonseu: any) => {
  ids.value = tonseu.map((item: HeuinsWcie) => item.id)
  await demuinsesort(ids.value)
  gethuonse()
  proxy?.$modal.msgSuccess(`排序成功`)
  mionseu.value = false;
}
// 视频排序拖拽取消
const huondetio = () => {
  buionset.value = [];
  mionseu.value = false;
}


onMounted(() => {
  getTitle()
});
</script>

<style scoped>
/* oss上传的魔改上传和进度条的样式 */
.el-progress--line {
  margin-top: 8px;
  width: 146px;
}

:deep(.el-form-item__content) {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}

:deep(.el-form-item--default .el-form-item__content) {
  line-height: 0px;
}



.muonseu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clearfix {
  font-size: 17px;
  font-weight: 600;
}

.avatar-uploader .avatar {
  width: 146px;
  height: 146px;
  display: block;
  object-fit: contain;
}

.huonseonc {
  width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tuioncae {
  width: 170px;
  margin-top: 10px;
}

.ionctu {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 999;
  color: #409eff;
  font-size: 28px;
}

.huniet {
  margin-top: 26px;
  margin-bottom: 15px;
  margin-right: 15px;
}

.muonset {
  padding: 8px 15px;
  border-radius: 6px;
  color: #ffff;
  background-color: #409EFF;
}

.cuinsey {
  display: flex;
  flex-wrap: wrap;
}

.cuinseon{
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

<style>
.avatar-uploader .el-upload {
  background-color: var(--el-fill-color-lighter);
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 146px;
  height: 146px;
  text-align: center;
}
</style>